<template> 
	
	<view>
		   <view class="">
		   		<view class="table1">
		   			<u-form :model="form" border-bottom='false'>
		   				<u-form-item label="年份:" border-bottom='false' :labelWidth='80' @click="show = true">
		   					<u-input v-model="form.a1" border='false' placeholder="请选择年份" type="select"/>
		   					<image  class="fun" src="/static/fun.png" mode=""></image>
		   				</u-form-item>
		   				<u-form-item label="经费科目:" border-bottom='false' :labelWidth='80'>
		
		   					<u-input v-model="form.a2" border='false' placeholder="请选择经费类型" type="select"/>
		   					<image  class="fun" src="/static/fun.png" mode=""></image>
		   				</u-form-item>
		   				<u-form-item label="科室:" border-bottom='false' :labelWidth='80'>
		   					<u-input v-model="form.a3" border='false' placeholder="请选择科室" type="select"/>
		   					<image  class="fun" src="/static/fun.png" mode=""></image>
		   				</u-form-item>
		   				<u-form-item label="项目:" border-bottom='false' :labelWidth='80'>
		   					<u-input v-model="form.a4" border='false' placeholder="请输入项目" type="select"/>
		   					<image  class="fun" src="/static/fun.png" mode=""></image>
		   				</u-form-item>
		   			</u-form>
		   		</view>
				
		   	</view>
			<!-- 弹出 -->
			<view >
				<u-popup  :show="show" @close="close" @open="open" mode="center" border-radius="20rpx" width="500rpx" height="600px">
				            <view class="textbox" style="background-color: #6F97FF;">
				                <text class="word" style="color: #fff;font-size: 35rpx;">请选择经费类型</text>
						
							</view>
							<view class="textbox" id="box" >
							    <text class="word" >请选择经费类型</text>
								
							</view >
							<view class="textbox" id="box">
							    <text class="word" >请选择经费类型</text>
								
							</view>
							<view class="textbox" id="box">
							    <text class="word" >请选择经费类型</text>
								
							</view>
							<view class="textbox" id="box">
							    <text class="word" >请选择经费类型</text>
								
							</view>
							<view class="textbox">
							    <text class="word" >请选择经费类型</text>
								
							</view>
							<view class="tbox" style="margin-top: 20rpx;">
							    <text class="word" style="color: #6F97FF;font-size: 35rpx;"  @click="show = flase">取消</text>
													
							</view>
				  </u-popup>
				 
			</view>
		<view class="" style=" " >
			<button style="background-image: linear-gradient(to right, #548EEB, #446FE0; color: #FFFFFF;margin-top: 20rpx;">查询结果</button>
			<view class="" style="border: 1rpx solid #fff; margin-top: 30rpx; padding-left: 20rpx;background-color: #fff;">
				<view class="" style="margin-top: 10rpx;">
					<view class="lei">
						<image src="../../static/bud.png" mode=""></image>
						<text style="color: #498B0D; padding-left: 20rpx;">车辆维修费用</text>
						<text style="float: right;padding-right: 30rpx;padding-top: 40rpx;"><text style="color: #D90000 ; font-size: 30rpx;">8921</text>元</text>
					</view>
					<view class="line"></view>
				</view>
				<view class="" style="font-size: 28rpx;">
					<text >项目：第一季度团建活动</text>
				</view>
				<view class="" style="font-size: 25rpx; color: #BBBCBE;margin-top: 15rpx;margin-bottom: 25rpx;">
					<text>龙岩市消防支队</text>
					<text style="float: right;padding-right: 35rpx;">2022年</text>
				</view>
			</view>
			<view class="" style="border: 1rpx solid #fff; margin-top: 30rpx; padding-left: 20rpx;background-color: #fff;">
				<view class="" style="margin-top: 10rpx;">
					<view class="lei">
						<image src="../../static/bud.png" mode=""></image>
						<text style="color: #498B0D; padding-left: 20rpx;">车辆维修费用</text>
						<text style="float: right;padding-right: 30rpx;padding-top: 40rpx;"><text style="color: #D90000 ; font-size: 30rpx;">8921</text>元</text>
					</view>
					<view class="line"></view>
				</view>
				<view class="" style="font-size: 28rpx;">
					<text >项目：第一季度团建活动</text>
				</view>
				<view class="" style="font-size: 25rpx; color: #BBBCBE;margin-top: 15rpx;margin-bottom: 25rpx;">
					<text>龙岩市消防支队</text>
					<text style="float: right;padding-right: 35rpx;">2022年</text>
				</view>
			</view>
			<view class="" style="border: 1rpx solid #fff; margin-top: 30rpx; padding-left: 20rpx;background-color: #fff;">
				<view class="" style="margin-top: 10rpx;">
					<view class="lei">
						<image src="../../static/bud.png" mode=""></image>
						<text style="color: #498B0D; padding-left: 20rpx;">车辆维修费用</text>
						<text style="float: right;padding-right: 30rpx;padding-top: 40rpx;"><text style="color: #D90000 ; font-size: 30rpx;">8921</text>元</text>
					</view>
					<view class="line"></view>
				</view>
				<view class="" style="font-size: 28rpx;">
					<text >项目：第一季度团建活动</text>
				</view>
				<view class="" style="font-size: 25rpx; color: #BBBCBE;margin-top: 15rpx;margin-bottom: 25rpx;">
					<text>龙岩市消防支队</text>
					<text style="float: right;padding-right: 35rpx;">2022年</text>
				</view>
			</view>
	
			
		</view>
			
	</view>
</template>

<script>
		export default {
			data() {
				return {
					form:{a1:'',a2:'',a3:'',a4:''},
					show:false			
				}
			},
			methods:{
				open(){
					this.show=true
				},
				close(){
					this.show=false
				}
			}
		}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F4F4F4;
	}
	// span{
	// 	width: 200px;
	// }
	.tbox{
		width: 600rpx;
		height: 100rpx;
		text-align: center;
		
		border-radius: 20rpx;
	}
	.budg{
		border-radius:20rpx; 
	}
	#box{
		
		// margin-bottom: 15rpx;
		border-bottom: #F4F4F4 5rpx solid;
	}
	.word{
		font-size: 30rpx;
		line-height: 100rpx;
	}
	.textbox{
		width: 600rpx;
		height: 100rpx;
		text-align: center;
	}
	
	
	.poros{
		width: 200rpx;
		height: 200rpx;
	}
	.fun{
		width: 20rpx;
		height: 20rpx;
		
	}
	.lei image{
		width: 50rpx;
		height: 50rpx;
		margin-top: 20rpx;
	}
	.line{
		width: 700rpx;
		margin-top: 20rpx;
		margin-bottom: 15rpx;
		border-bottom: #F4F4F4 5rpx solid;
	}
	
	.table1{
		width: 90%;
		height: 450rpx;
		margin: 0 auto;
	}

</style>
